<template>
    <div class="tab-bar-item" @click="clickBtn">
      <div :style="activeStyle">
        <!-- 如果在插槽中设置的一些属性可能会直接被复制粘贴替换掉,所以要再套一个div -->
        <slot name="item-text"></slot>
      </div>
    </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    link: {
      type: String,
      default: 'Error'
    },
    activeColor: {
      type: String,
      default: 'red'
    }
  },
  methods: {
    // 使用箭头函数会改变 this 的指向
    // 注意在箭头函数中前使用 this 要先加上 let _this = this
    clickBtn: function () {
      // 避免重定向
      if (this.link !== this.$route.path) {
        this.$router.push(this.link)
      }
      // this.isActive = !this.isActive
    }
  },
  computed: {
    'isActive': function () {
      // 寻找活跃路由是否为该组件代表的路由
      // 判断当前路由是否活跃
      return !this.$route.path.indexOf(this.link)
    },
    // 当绑定的样式逻辑教复杂时,可通过 computed 来设置一个计算属性
    'activeStyle': function () {
      // 路由处于活跃状态时给 style 设置样式
      return this.isActive ? {color: this.activeColor} : {}
    }
  }
}
</script>

<style>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    line-height: 49px;
  }
</style>
